<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>浏览图片</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script src="../jquery/jquery-3.1.1.js"></script>
	<link rel="stylesheet" href="css/StyleSheet.css" type="text/css" />
	<style type="text/css">
			/* banner */
			.banner{
				width: 450px;
				height: 400px;
				-moz-user-select: none;
				position: relative;
			}
			/* banner 区域里面的 a 标签 */
			.banner .banner_img_a{
				position: absolute;
			}
			/* banner 区域里面的 img 标签 */
			.banner img{
				width: 478px;
				height: 400px;
			}
			.banner span{
				color: white;
				cursor: pointer;
				background-color: #444;
				padding: 5px 10px;
				border: 1px solid #444;
			}
			.banner span:hover{
				border-color: #FFB400;
			}
			/* banner 区域里面的 page */
			.page{
				text-align: center;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			.opt{
				margin: 10px 0;
				font-size: 16px;
			}
		</style>

  </head>
  
	<body>
		<div class="opt">请选择相册
			<select name="">
				<option value="1">长城</option>
			</select>
		</div>
		<div class="banner">
			<a class="banner_img_a show" href="#" target="_blank" style="display: inline;">
				<img src="../Images/football.jpg" alt="">
			</a>
			<a class="banner_img_a" href="#" target="_blank" style="display: none;">
				<img src="../Images/Galleries/541de072-7c5d-4a5a-a7db-a460331fcff5.jpg" alt="">
			</a>
			<a class="banner_img_a" href="#" target="_blank" style="display: none;">
				<img src="../Images/Galleries/7b32c0ed-f438-41bc-bc80-d485abdc238b.jpg" alt="">
			</a>
			<a class="banner_img_a" href="#" target="_blank" style="display: none;">
				<img src="../Images/Galleries/571d1c5b-a080-49d3-8e0c-558d54f4f5c7.jpg" alt="">
			</a>
			<a class="banner_img_a" href="#" target="_blank" style="display: none;">
				<img src="../Images/Galleries/83349e1a-6fcb-4101-a8b3-416772e4e31e.jpg" alt="">
			</a>
		</div>
			<div class="page">
				<button class="prev opt_sub">上一页</button>
				<button class="play opt_sub">play</button>
				<button class="next opt_sub">下一页</button>
			</div>
		<script type="text/javascript">
			// 表示当前轮播到那张图片
			var index = 0;
			
			// 开启定时器，正常轮播
			var slideTimer;
			$('.play').click(function(){
				slideTimer = setInterval(changeIndex,3000);
			});
			// 改变正常轮播的索引
			function changeIndex(){
				// 获取下一张轮播图的索引
				index = index >= $('.banner .banner_img_a').length-1 ? 0 : index+1;
				slideImage();
			}
			
			// 切换图片
			function slideImage(){
				// 然后让下一个轮播图显示
				$('.banner .banner_img_a').eq(index).fadeIn('fast').siblings('.banner_img_a').fadeOut('fast');
			}
			// 点击 < 和 > 切换上一张和下一张
			$('.page .prev').click(function(){
				index = index <= 0 ? $('.banner .banner_img_a').length-1 : index-1;
				slideImage();
			});
			$('.page .next').click(function(){
				changeIndex();
			});
			
		</script>
	</body>
</html>
